import { useCallback, useEffect, useState } from "react";
import type { PagePermission } from "@/types/public";
import { usePublicStore } from "@/stores";
import { useCommonStore } from "@/hooks/useCommonStore";
import { checkPermission } from "@/utils/permissions";
import BaseContent from "@/components/Content/BaseContent";
import { searchList, treeData } from "./model";
import BaseSearch from "@/components/Search/BaseSearch";
import BaseCard from "@/components/Card/BaseCard";
import { Tree, Button } from "antd";
import { DownOutlined, AppstoreFilled, DownloadOutlined } from "@ant-design/icons";
import type { TreeProps } from "antd";
import styles from "./index.module.css";

function Truck() {
    const [isFetch, setFetch] = useState(false);
    const [searchData, setSearchData] = useState({});
    const isRefreshPage = usePublicStore((state) => state.isRefreshPage);
    const setRefreshPage = usePublicStore((state) => state.setRefreshPage);
    const { permissions } = useCommonStore();
    const [isLoading, setLoading] = useState(false);

    // 权限前缀
    const permissionPrefix = "/system";
    const pagePermission: PagePermission = {
        page: checkPermission(`${permissionPrefix}/truck`, permissions),
    };

    /** 获取表格数据 */
    const getPage = useCallback(async () => {
        const params = { ...searchData };
        try {
            setLoading(true);
            setTimeout(() => {
                console.log(params);
                setLoading(false);
            }, 300);
        } finally {
            setFetch(false);
            // setLoading(false);
        }
    }, [searchData]);
    const onSearch = (values: FormData) => {
        setSearchData(values);
        setFetch(true);
    };

    // 首次进入自动加载接口数据
    useEffect(() => {
        getPage();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    // 如果是新增或编辑成功重新加载页面
    useEffect(() => {
        if (isRefreshPage) {
            setRefreshPage(false);
            getPage();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isRefreshPage]);

    useEffect(() => {
        if (isFetch) getPage();
    }, [getPage, isFetch]);

    const onSelect: TreeProps["onSelect"] = (selectedKeys, info) => {
        console.log("selected", selectedKeys, info);
    };

    return (
        <>
            <BaseContent isPermission={pagePermission.page}>
                <BaseCard>
                    <BaseSearch list={searchList()} data={searchData} isLoading={isLoading} handleFinish={onSearch} />
                </BaseCard>

                <div style={{ display: "flex", marginTop: 10 }}>
                    <BaseCard style={{ width: "25%" }}>
                        <h1 className={styles.titlelist}>
                            <AppstoreFilled className={styles.listsvg} />
                            订单列表
                        </h1>
                        <Tree showLine switcherIcon={<DownOutlined />} defaultExpandedKeys={["0-0-0"]} onSelect={onSelect} treeData={treeData} />
                    </BaseCard>
                    <BaseCard style={{ width: "74%", marginLeft: "1%" }}>
                        <h1 className={styles.titlelist}>
                            <>
                                <AppstoreFilled className={styles.listsvg} />
                                作业单
                            </>
                            <Button type="primary" icon={<DownloadOutlined />} style={{ marginLeft: 30 }}>
                                导出
                            </Button>
                        </h1>
                        <table className={styles.maintable}>
                            <tbody>
                                <tr>
                                    <th>日期</th>
                                    <td>2024-05-29</td>
                                    <th>班次</th>
                                    <td>二班白班</td>
                                    <th>作业单</th>
                                    <td colSpan={2}>20240529002-2-1</td>
                                </tr>
                                <tr>
                                    <th colSpan={7}>二道</th>
                                </tr>
                                <tr>
                                    <th>船名</th>
                                    <td>星辉</td>
                                    <th>品种</th>
                                    <td>大豆</td>
                                    <th colSpan={2}>理保员</th>
                                    <td>潘荣</td>
                                </tr>
                                <tr>
                                    <th>站点</th>
                                    <td>茂陵</td>
                                    <th>货代</th>
                                    <td>江苏瑞宇货代</td>
                                    <th colSpan={2}>操作员</th>
                                    <td>cyx</td>
                                </tr>
                                <tr>
                                    <th>序号</th>
                                    <th>车号</th>
                                    <th>容量</th>
                                    <th>车辆自重</th>
                                    <th>是否确认</th>
                                    <th>备注</th>
                                    <th>总计</th>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>8107712</td>
                                    <td>69.00</td>
                                    <td>24.70</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>68973.00</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>8107932</td>
                                    <td>69.00</td>
                                    <td>24.70</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>68974.00</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>8107955</td>
                                    <td>69.00</td>
                                    <td>24.70</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>68973.00</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>8107863</td>
                                    <td>69.00</td>
                                    <td>24.70</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>68974.00</td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>8108363</td>
                                    <td>69.00</td>
                                    <td>24.70</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>68975.00</td>
                                </tr>
                                <tr>
                                    <td>6</td>
                                    <td>8109922</td>
                                    <td>69.00</td>
                                    <td>24.70</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>68974.00</td>
                                </tr>
                                <tr>
                                    <td>7</td>
                                    <td>8107853</td>
                                    <td>69.00</td>
                                    <td>24.70</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>68974.00</td>
                                </tr>
                                <tr>
                                    <td>8</td>
                                    <td>8108828</td>
                                    <td>69.00</td>
                                    <td>24.70</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>68974.00</td>
                                </tr>
                                <tr>
                                    <td>9</td>
                                    <td>8108334</td>
                                    <td>69.00</td>
                                    <td>24.70</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>68974.00</td>
                                </tr>
                                <tr>
                                    <td>10</td>
                                    <td>8109890</td>
                                    <td>69.00</td>
                                    <td>24.70</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>68974.00</td>
                                </tr>
                                <tr>
                                    <td>11</td>
                                    <td>8107809</td>
                                    <td>69.00</td>
                                    <td>24.70</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>68959.00</td>
                                </tr>
                                <tr>
                                    <th colSpan={2}>开始时间</th>
                                    <td>09:29</td>
                                    <th>结束时间</th>
                                    <td>11:35</td>
                                    <th>合计</th>
                                    <td>758698.00</td>
                                </tr>
                            </tbody>
                        </table>
                    </BaseCard>
                </div>
            </BaseContent>
        </>
    );
}

export default Truck;
